<!--
 * @Author: xuna
 * @Descripttion: 查看回收记录
-->
<template>
  <div class="check-container">
    <!-- 表格 -->
    <wf-el-table
      :list="tableData"
      :loading="loading"
      :total="total"
      :current="current"
      @on-page-change="onPageChange"
    >
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column
        v-for="item in propData"
        :key="item.label"
        :prop="item.prop"
        :label="item.label"
      ></el-table-column>
    </wf-el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import WfElTable from '@/components/Table/index';
  import { recycleRecord } from '@/api/careCard';
  export default {
    components: { WfElTable },
    data() {
      return {
        current: 1,
        total: 0,
        tableData: [],
        loading: false,
        propData: [
          {
            prop: 'name',
            label: '员工姓名',
          },

          {
            prop: 'deptName',
            label: '部门',
          },
          {
            prop: 'phone',
            label: '手机号',
          },
          {
            prop: 'workState',
            label: '状态',
          },
          {
            prop: 'recycleAmount',
            label: '回收额度（元）',
          },
          {
            prop: 'recycleReason',
            label: '回收原因',
          },
          {
            prop: 'recycleTime',
            label: '回收时间',
          },
        ],
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organId() {
        return this.userInfo.organId;
      },
      userId() {
        return this.userInfo.id;
      },
      isEmpty() {
        return this.tableData.length == 0;
      },
    },
    activated() {
      this.getTableList();
    },
    methods: {
      getTableList() {
        this.initList(1);
      },
      onPageChange(data) {
        this.initList(data.current);
      },
      initList(current) {
        this.loading = true;
        let objData = {
          current,
          deptId: this.organId,
          size: 10,
          userId: this.userId,
        };
        try {
          recycleRecord(objData).then(res => {
            this.loading = false;
            console.log(res);
            if (res.status == 200) {
              let tableData = JSON.parse(JSON.stringify(res.data.records));
              this.tableData = tableData.map(val => {
                val.workState = val.workState == 0 ? '在职' : val.workState == 1 ? '离职' : '注销';
                return val;
              });
              this.total = res.data.total;
            }
          });
        } catch (error) {
          this.loading = false;
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .wf-table-wrapper {
    height: 100% !important;
  }
  .check-container {
    @include wh(100%, 100%);
    overflow: hidden;
    padding-top: 0 !important;
    /deep/.el-form--inline {
      border-radius: 7px;
    }

    /deep/.el-table {
      border-radius: 7px;
    }
  }

  // /deep/.wf-table-wrapper {
  //   height: calc(100vh - 143px) !important;
  //   margin-top: 10px;
  // }
</style>
